<script setup>
import { ref } from 'vue'
import FileSelect from '../components/FileSelect.vue'

let page = 'convertFormat'
let activeIndex = ref(0)
let formatsAry = ['png', 'jpeg', 'jpg', 'webp']
let suffix = ref(formatsAry[0])

function setActive(index) {
  activeIndex.value = index
  suffix.value = formatsAry[index]
}
</script>
<template>
  <div class="sets-wrapper">
    <h5>目标图片格式</h5>
    <div class="format-list">
      <p
        v-for="(format, index) in formatsAry"
        :key="format"
        :class="{
          'item-format': true,
          cur: index === activeIndex
        }"
        @click="setActive(index)"
      >
        {{ format }}
      </p>
    </div>
  </div>
  <div class="files-wrapper flex1">
    <FileSelect :page="page" :msg="suffix" />
  </div>
</template>
<style scoped>
.sets-wrapper {
  width: 35vw;
  padding: 10px 15px;
}

.sets-wrapper h5 {
  margin-bottom: 10px;
}

.format-list {
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  text-align: center;
  width: 80px;
}

.format-list .item-format {
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  padding: 10px 0;
  text-transform: uppercase;
}

.format-list .item-format.cur {
  background-color: #fff5f5;
  color: red;
  font-weight: bold;
}

.format-list .item-format:last-child {
  border-bottom: none;
}

.files-wrapper {
  background-color: #f5f5f5;
}
</style>
